<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由命名</title>
    <script src="../../vue.js"></script>
    <script src="../../vue-router.js"></script>

    <style>
      
    </style>
</head>

<body>
    <div id="app">
        <h1>我是标题</h1>
        <!--几个需要注意的地方：
        1、to前面一定要加:号，应该就是bind的缩写
        2、to后面的对象只需要一个名字即可访问到设定好的路由地址，
        这个路由地址是有routes定义出来的
        3、通过params属性可以指定该路由的动态路由地址，
        同样的需要在routes里定义好路径
        下面第一个路由最终访问的地址为XXXX/#/bar/123
        -->
        <router-link :to="{name:'foo',params:{userId:'123'}}">go to bar</router-link>
        <router-link :to="{name:'bar'}">go tu foo</router-link>
        <router-view></router-view>

    </div>
    <script>

        const foo = {
            template: '<p>bar</p>'
        }
        const bar = {
            template: '<p>foo</p>'
        }
        /*

        */
        const router = new VueRouter({
            routes: [
                {path:'/bar/:userId',name:'foo',component:foo},
                {path:'/foo',name:'bar',component:bar}
            ]
        });
        const app = new Vue({

            router

        }).$mount('#app')
    </script>
</body>

</html>